<template>
	<div>

		<!-- 轮播图区域 -->
		<mt-swipe :auto="4000">
		  <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
		  	<div>
		  		{{item[0]}}
		  	</div>
		  </mt-swipe-item>	  
		</mt-swipe>
		
		<!-- 九宫格 到 六宫格 的改造工程 -->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
                    <img src="../../images/menu1.png" alt="">
                    <div class="mui-media-body">新闻资讯</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/menu2.png" alt="">
                    <div class="mui-media-body">图片分享</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/menu3.png" alt="">
                    <div class="mui-media-body">商品购买</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/menu4.png" alt="">
                    <div class="mui-media-body">留言反馈</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/menu5.png" alt="">
                    <div class="mui-media-body">视频专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/menu6.png" alt="">
                    <div class="mui-media-body">联系我们</div></a></li>

        </ul> 


	</div>
</template>

<script>
	//导入mint-ui中的Toast控件
	import {Toast} from 'mint-ui'

export default {
	data(){
		return{
			//保存轮播图
			lunbotuList:[]
		}
	},
	created(){ //组件创建完成后调用此函数
		this.getLunbotu()
	},
	methods:{
		getLunbotu(){ //获取轮播图数据的方法
			this.$http.jsonp("https://suggest.taobao.com/sug?code=utf-8&q=%E7%89%99%E8%86%8F&callback=cb").then(result => {
				//console.log(result);
				if (result) {
					this.lunbotuList = result.body.result;
					Toast('加载轮播图OK。。。');
				}else {
					Toast('加载轮播图失败。。。');
				}
			});
		}
		
		// getLunbotu(){ //获取轮播图数据的方法
		// 	var _this=this
		// 	this.$http.jsonp("https://suggest.taobao.com/sug?code=utf-8&q=%E7%89%99%E8%86%8F&callback=cb").then(function(res){
		// 		console.log(res)
		// 		_this.lunbotuList=res.body.result

		// 	});
		// }
	}
}
	
</script>

<style lang="scss" scoped>

.mint-swipe{
	height: 200px;

	.mint-swipe-item{
		&:nth-child(1){
			background-color: red;
		}
		&:nth-child(2){
			background-color: blue;
		}
		&:nth-child(3){
			background-color: cyan;
		}
	}
}

.mui-grid-view.mui-grid-9{
	background-color: #fff;
	border:none;

	img{
		width: 60px;
		height: 60px;
	}

	.mui-media-body{
		font-size: 13px;
	}
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell{
	border: 0;
}
	
</style>